<template>
  <div class="login-container">
    <pro-form
      class="login-box"
      :fields="fields"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import proForm from '@/components/pro-form'
import { login } from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
  name: 'LoginIndex',
  components: {
    proForm
  },
  props: {},
  data () {
    return {
      fields: [
        {
          title: '账号',
          key: 'username',
          type: 'select',
          isRequired: true,
          options: [
            {
              label: '管理员',
              value: 'admin'
            },
            {
              label: '学生',
              value: 'student'
            }
          ],
          defaultValue: 'admin'
        },
        {
          title: '密码',
          key: 'password',
          isRequired: true,
          dataType: 'int',
          // dataType: 'float',
          defaultValue: '123456',
          props: {
            placeholder: '请输入密码',
            showPassword: true
          }
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onSubmit (form) {
      login(form).then(res => {
        // console.log(res.data.token)
        const token = res.data.token
        setToken(token)
        this.$store.commit('SET_TOKEN', token)

        this.$router.push({
          path: '/'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('https://img0.baidu.com/it/u=1859382768,3481633156&fm=26&fmt=auto&gp=0.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login-box {
  padding: 40px;
  padding-bottom: 20px;
  border: 1px solid #eee;
  background: rgba(190, 190, 190, 0.3);
  border-radius: 40px;
  z-index: 20;
}
/deep/ .el-input__inner {
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.9);
}
/deep/ .el-form-item__label {
  color: #fff;
}
/deep/ .el-button {
  background: rgba(255, 255, 255, 0.7)
}
</style>
